<template>
  <h1>1.组件的基本写法</h1>
  <h1>{{name}}---{{age}}---{{sex}}</h1>
  <button @click="change">修改对象数据</button>
</template>

<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
  name: "About",
})
</script>


<script lang="ts" setup>
/* 
  - 如果直接解构代理对象,得到变量,则直接失去响应式能力
  - 如果想要解构代理对象的属性,并且还要保证响应能力存在,则需要使用toRefs的方法
  - 从toRefs解构出来的数据其实是ref对象,所以修改的时候要添加.value

*/


import {reactive , toRefs} from "vue"
const person = reactive({
  name: "laoliu",
  age: 18,
  sex: "男",
})

console.log(person);
let {name , age , sex} = toRefs(person)
 
const change = () => {
 console.log( age.value++);
 
}



</script>

<style scoped>
</style>